<template>
  <el-form
    ref="dataFormRef"
    :model="dataForm"
    :rules="dataRule"
    label-width="142px"
    @submit.prevent
    @keyup.enter="onSubmit(dataFormRef)"
  >
    <!--后台相关配置-->
    <span v-if="paramKey === 'PLATFROM_WEBSITE_CONFIG'">
      <el-form-item
        :label="$t('webInfoConfig.loginLogo')"
        prop="bsLoginLogoImg"
      >
        <imgs-upload
          v-model="dataForm.bsLoginLogoImg"
          :limit="1"
          :size="'380*96'"
          :prompt="false"
        />
      </el-form-item>

      <el-form-item
        :label="$t('webInfoConfig.loginBg')"
        prop="bsLoginBgImg"
      >
        <imgs-upload
          v-model="dataForm.bsLoginBgImg"
          :limit="1"
          :size="'1920*940'"
          :prompt="false"
        />
      </el-form-item>

      <el-form-item
        :label="$t('webInfoConfig.bsCopyright') + '-' + $t('webInfoConfig.chinese')"
        prop="bsCopyrightCn"
      >
        <el-input v-model="dataForm.bsCopyrightCn" />
      </el-form-item>

      <el-form-item
        :label="$t('webInfoConfig.bsCopyright') + '-' + $t('webInfoConfig.english')"
        prop="bsCopyrightEn"
      >
        <el-input v-model="dataForm.bsCopyrightEn" />
      </el-form-item>

      <el-form-item
        :label="$t('webInfoConfig.bsTitleContent') + '-' + $t('webInfoConfig.chinese')"
        prop="bsTitleContentCn"
      >
        <el-input
          v-model="dataForm.bsTitleContentCn"
          maxlength="15"
          show-word-limit
        />
      </el-form-item>

      <el-form-item
        :label="$t('webInfoConfig.bsTitleContent') + '-' + $t('webInfoConfig.english')"
        prop="bsTitleContentEn"
      >
        <el-input
          v-model="dataForm.bsTitleContentEn"
          maxlength="20"
          show-word-limit
        />
      </el-form-item>

      <el-form-item
        :label="$t('webInfoConfig.bsTitleImg')"
        prop="bsTitleImg"
      >
        <imgs-upload
          v-model="dataForm.bsTitleImg"
          :limit="1"
          :size="'100*100'"
          :prompt="false"
        />
      </el-form-item>

      <el-form-item
        :label="$t('webInfoConfig.TopIcon')"
        prop="bsTitleImg"
      >
        <imgs-upload
          v-model="dataForm.bsTopBarIcon"
          :limit="1"
          :size="'160*48'"
          :prompt="false"
        />
      </el-form-item>

      <el-form-item
        :label="$t('webInfoConfig.bsMenuTitleOpen') + '-' + $t('webInfoConfig.chinese')"
        prop="bsMenuTitleOpenCn"
      >
        <el-input
          v-model="dataForm.bsMenuTitleOpenCn"
          maxlength="15"
          show-word-limit
        />
      </el-form-item>

      <el-form-item
        :label="$t('webInfoConfig.bsMenuTitleOpen') + '-' + $t('webInfoConfig.english')"
        prop="bsMenuTitleOpenEn"
      >
        <el-input
          v-model="dataForm.bsMenuTitleOpenEn"
          maxlength="20"
          show-word-limit
        />
      </el-form-item>

      <el-form-item
        :label="$t('webInfoConfig.bsMenuTitleClose') + '-' + $t('webInfoConfig.chinese')"
        prop="bsMenuTitleCloseCn"
      >
        <el-input
          v-model="dataForm.bsMenuTitleCloseCn"
          maxlength="6"
          show-word-limit
        />
      </el-form-item>

      <el-form-item
        :label="$t('webInfoConfig.bsMenuTitleClose') + '-' + $t('webInfoConfig.english')"
        prop="bsMenuTitleCloseEn"
      >
        <el-input
          v-model="dataForm.bsMenuTitleCloseEn"
          maxlength="6"
          show-word-limit
        />
      </el-form-item>
    </span>

    <!--PC端相关配置-->
    <span v-if="paramKey === 'PC_WEBSITE_CONFIG'">
      <el-form-item
        label="logo"
        prop="pcLogoImg"
      >
        <imgs-upload
          v-model="dataForm.pcLogoImg"
          :limit="1"
          :size="'100*100'"
          :prompt="false"
        />
      </el-form-item>

      <el-form-item
        :label="$t('webInfoConfig.loginBg')"
        prop="pcLoginBgImg"
      >
        <imgs-upload
          v-model="dataForm.pcLoginBgImg"
          :limit="1"
          :size="'1920*600'"
          :prompt="false"
        />
      </el-form-item>

      <el-form-item
        :label="$t('webInfoConfig.bsCopyright') + '-' + $t('webInfoConfig.chinese')"
        prop="pcCopyrightCn"
      >
        <el-input v-model="dataForm.pcCopyrightCn" />
      </el-form-item>

      <el-form-item
        :label="$t('webInfoConfig.bsCopyright') + '-' + $t('webInfoConfig.english')"
        prop="pcCopyrightEn"
      >
        <el-input v-model="dataForm.pcCopyrightEn" />
      </el-form-item>

      <el-form-item
        :label="$t('webInfoConfig.pcQrcodeImg')"
        prop="pcQrcodeImg"
      >
        <imgs-upload
          v-model="dataForm.pcQrcodeImg"
          :limit="1"
          :size="'100*100'"
          :prompt="false"
        />
      </el-form-item>

      <el-form-item
        :label="$t('webInfoConfig.pcCompanyName') + '-' + $t('webInfoConfig.chinese')"
        prop="pcCompanyNameCn"
      >
        <el-input v-model="dataForm.pcCompanyNameCn" />
      </el-form-item>

      <el-form-item
        :label="$t('webInfoConfig.pcCompanyName') + '-' + $t('webInfoConfig.english')"
        prop="pcCompanyNameEn"
      >
        <el-input v-model="dataForm.pcCompanyNameEn" />
      </el-form-item>

      <el-form-item
        :label="$t('webInfoConfig.pcCompanyInfo') + '-' + $t('webInfoConfig.chinese')"
        prop="pcCompanyInfoCn"
      >
        <el-input
          v-model="dataForm.pcCompanyInfoCn"
          type="textarea"
        />
      </el-form-item>

      <el-form-item
        :label="$t('webInfoConfig.pcCompanyInfo') + '-' + $t('webInfoConfig.english')"
        prop="pcCompanyInfoEn"
      >
        <el-input
          v-model="dataForm.pcCompanyInfoEn"
          type="textarea"
        />
      </el-form-item>

      <el-form-item
        :label="$t('webInfoConfig.pcTitleContent') + '-' + $t('webInfoConfig.chinese')"
        prop="pcTitleContentCn"
      >
        <el-input v-model="dataForm.pcTitleContentCn" />
      </el-form-item>

      <el-form-item
        :label="$t('webInfoConfig.pcTitleContent') + '-' + $t('webInfoConfig.english')"
        prop="pcTitleContentEn"
      >
        <el-input v-model="dataForm.pcTitleContentEn" />
      </el-form-item>

      <el-form-item
        :label="$t('webInfoConfig.pcTitleImg')"
        prop="pcTitleImg"
      >
        <imgs-upload
          v-model="dataForm.pcTitleImg"
          :limit="1"
          :size="'100*100'"
          :prompt="false"
        />
      </el-form-item>
      <el-form-item
        :label="$t('webInfoConfig.pcLogoImgText')"
        prop="pcLogoImgText"
      >
        <imgs-upload
          v-model="dataForm.pcLogoImgText"
          :limit="1"
          :size="'380*96'"
          :prompt="false"
        />
      </el-form-item>

      <el-form-item
        :label="$t('webInfoConfig.pcWelcome') + '-' + $t('webInfoConfig.chinese')"
        prop="pcWelcomeCn"
      >
        <el-input v-model="dataForm.pcWelcomeCn" />
      </el-form-item>

      <el-form-item
        :label="$t('webInfoConfig.pcWelcome') + '-' + $t('webInfoConfig.english')"
        prop="pcWelcomeEn"
      >
        <el-input v-model="dataForm.pcWelcomeEn" />
      </el-form-item>
    </span>

    <!--H5端相关配置-->
    <span v-if="paramKey === 'H5_WEBSITE_CONFIG'">
      <el-form-item
        :label="$t('webInfoConfig.loginLogo')"
        prop="uniLoginLogoImg"
      >
        <imgs-upload
          v-model="dataForm.uniLoginLogoImg"
          :limit="1"
          :size="'100*100'"
          :prompt="false"
        />
      </el-form-item>
      <el-form-item
        :label="$t('webInfoConfig.uniTitleContent') + '-' + $t('webInfoConfig.chinese')"
        prop="uniTitleContentCn"
      >
        <el-input v-model="dataForm.uniTitleContentCn" />
      </el-form-item>
      <el-form-item
        :label="$t('webInfoConfig.uniTitleContent') + '-' + $t('webInfoConfig.english')"
        prop="uniTitleContentEn"
      >
        <el-input v-model="dataForm.uniTitleContentEn" />
      </el-form-item>
      <el-form-item
        :label="$t('webInfoConfig.h5Welcome') + '-' + $t('webInfoConfig.chinese')"
        prop="h5WelcomeCn"
      >
        <el-input v-model="dataForm.h5WelcomeCn" />
      </el-form-item>

      <el-form-item
        :label="$t('webInfoConfig.h5Welcome') + '-' + $t('webInfoConfig.english')"
        prop="h5WelcomeEn"
      >
        <el-input v-model="dataForm.h5WelcomeEn" />
      </el-form-item>
    </span>

    <!--自提点端相关配置-->
    <span v-if="paramKey === 'STATION_WEBSITE_CONFIG'">
      <el-form-item
        :label="$t('webInfoConfig.loginLogo')"
        prop="stationLoginLogoImg"
      >
        <imgs-upload
          v-model="dataForm.stationLoginLogoImg"
          :limit="1"
          :size="'100*100'"
          :prompt="false"
        />
      </el-form-item>
    </span>

    <el-form-item>
      <el-button
        type="primary"
        @click="onSubmit(dataFormRef)"
      >
        {{ $t('webInfoConfig.save') }}
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { formatConfigInfo } from '@/utils/websiteConfig'

const props = defineProps({
  paramKey: {
    default: 'PLATFROM_WEBSITE_CONFIG',
    type: String
  },
  remark: {
    default: '',
    type: String
  }
})

const dataFormRef = ref(null)
const dataRule = reactive({})
const webConfigStore = useWebConfigStore()

const dataForm = ref({
  id: null,
  configType: null, // 配置类型（1:后台 2:PC端 3:h5端 4:自提点端）
  isActivity: 0,
  bsLoginLogoImg: null,
  bsLoginBgImg: null,
  bsCopyrightCn: null,
  bsCopyrightEn: null,
  bsTitleContentCn: null,
  bsTitleContentEn: null,
  bsTitleImg: null,
  bsTopBarIcon: null,
  bsMenuTitleOpenCn: null,
  bsMenuTitleOpenEn: null,
  bsMenuTitleCloseCn: null,
  bsMenuTitleCloseEn: null,
  pcLogoImg: null,
  pcCopyrightCn: null,
  pcCopyrightEn: null,
  pcQrcodeImg: null,
  pcCompanyNameCn: null,
  pcCompanyNameEn: null,
  pcCompanyInfoCn: null,
  pcCompanyInfoEn: null,
  pcTitleContentCn: null,
  pcTitleContentEn: null,
  pcTitleImg: null,
  pcCompanyNameShortCn: null,
  pcCompanyNameShortEn: null,
  pcLogoImgText: null,
  pcWelcomeCn: null,
  pcWelcomeEn: null,
  pcLoginBgImg: null,
  uniLoginLogoImg: null,
  stationLoginLogoImg: null
})

onMounted(() => {
  nextTick(() => {
    dataFormRef.value.resetFields()
    // 获取网站配置信息
    getConfigData()
  })
})

const getConfigData = () => {
  if (props.paramKey) {
    http({
      url: http.adornUrl(`/sys/webConfig/info/${props.paramKey}`),
      method: 'get',
      params: http.adornParams()
    }).then(({ data }) => {
      if (!data || data === '{}') return
      dataForm.value = JSON.parse(data)
    })
  }
}
// 提示警告
const errorMsg = message => {
  ElMessage({
    message,
    type: 'error',
    duration: 1500,
    customClass: 'zZindex'
  })
}
/**
 * 非空判断提示
 */
const nonEmpty = () => {
  // 后台配置判断
  if (props.paramKey === 'PLATFROM_WEBSITE_CONFIG') {
    if (!dataForm.value.bsLoginLogoImg) {
      errorMsg($t('webInfoConfig.loginLogo') + $t('webInfoConfig.canNotBeEmpty'))
      return
    }
    if (!dataForm.value.bsLoginBgImg) {
      errorMsg($t('webInfoConfig.loginBg') + $t('webInfoConfig.canNotBeEmpty'))
      return
    }
    if (!dataForm.value.bsCopyrightCn) {
      errorMsg(
        $t('webInfoConfig.bsCopyright') +
          '-' +
          $t('webInfoConfig.chinese') +
          $t('webInfoConfig.canNotBeEmpty')
      )
      return
    }
    // TopIcon
    if (!dataForm.value.bsTopBarIcon) {
      errorMsg($t('webInfoConfig.TopIcon') + $t('webInfoConfig.canNotBeEmpty'))
      return
    }
    if (!dataForm.value.bsTitleContentCn) {
      errorMsg(
        $t('webInfoConfig.bsTitleContent') +
          '-' +
          $t('webInfoConfig.chinese') +
          $t('webInfoConfig.canNotBeEmpty')
      )
      return
    }
    if (!dataForm.value.bsTitleImg) {
      errorMsg($t('webInfoConfig.bsTitleImg') + $t('webInfoConfig.canNotBeEmpty'))
      return
    }
    if (!dataForm.value.bsMenuTitleOpenCn) {
      errorMsg(
        $t('webInfoConfig.bsMenuTitleOpen') +
          '-' +
          $t('webInfoConfig.chinese') +
          $t('webInfoConfig.canNotBeEmpty')
      )
      return
    }
    if (!dataForm.value.bsMenuTitleCloseCn) {
      errorMsg(
        $t('webInfoConfig.bsMenuTitleClose') +
          '-' +
          $t('webInfoConfig.chinese') +
          $t('webInfoConfig.canNotBeEmpty')
      )
      return
    }
  }
  // pc端配置判断
  if (props.paramKey === 'PC_WEBSITE_CONFIG') {
    if (!dataForm.value.pcLogoImg) {
      errorMsg($t('webInfoConfig.loginLogo') + $t('webInfoConfig.canNotBeEmpty'))
      return
    }
    if (!dataForm.value.pcLoginBgImg) {
      errorMsg($t('webInfoConfig.loginBg') + $t('webInfoConfig.canNotBeEmpty'))
      return
    }
    if (!dataForm.value.pcCopyrightCn) {
      errorMsg(
        $t('webInfoConfig.bsCopyright') +
          '-' +
          $t('webInfoConfig.chinese') +
          $t('webInfoConfig.canNotBeEmpty')
      )
      return
    }
    if (!dataForm.value.pcQrcodeImg) {
      errorMsg($t('webInfoConfig.pcQrcodeImg') + $t('webInfoConfig.canNotBeEmpty'))
      return
    }
    if (!dataForm.value.pcCompanyNameCn) {
      errorMsg(
        $t('webInfoConfig.pcCompanyName') +
          '-' +
          $t('webInfoConfig.chinese') +
          $t('webInfoConfig.canNotBeEmpty')
      )
      return
    }
    if (!dataForm.value.pcCompanyInfoCn) {
      errorMsg(
        $t('webInfoConfig.pcCompanyInfo') +
          '-' +
          $t('webInfoConfig.chinese') +
          $t('webInfoConfig.canNotBeEmpty')
      )
      return
    }
    if (!dataForm.value.pcTitleContentCn) {
      errorMsg(
        $t('webInfoConfig.pcTitleContent') +
          '-' +
          $t('webInfoConfig.chinese') +
          $t('webInfoConfig.canNotBeEmpty')
      )
      return
    }
    if (!dataForm.value.pcTitleImg) {
      errorMsg($t('webInfoConfig.bsTitleImg') + $t('webInfoConfig.canNotBeEmpty'))
      return
    }
    if (!dataForm.value.pcLogoImgText) {
      errorMsg($t('webInfoConfig.pcLogoImgText') + $t('webInfoConfig.canNotBeEmpty'))
      return
    }
    if (!dataForm.value.pcWelcomeCn) {
      errorMsg(
        $t('webInfoConfig.pcWelcome') +
          '-' +
          $t('webInfoConfig.chinese') +
          $t('webInfoConfig.canNotBeEmpty')
      )
      return
    }
  }
  // h5端配置判断
  if (props.paramKey === 'H5_WEBSITE_CONFIG') {
    if (!dataForm.value.uniLoginLogoImg) {
      errorMsg($t('webInfoConfig.loginLogo') + $t('webInfoConfig.canNotBeEmpty'))
      return
    }
  }
  // 自提点端配置判断 STATION_WEBSITE_CONFIG
  if (props.paramKey === 'STATION_WEBSITE_CONFIG') {
    if (!dataForm.value.stationLoginLogoImg) {
      errorMsg($t('webInfoConfig.loginLogo') + $t('webInfoConfig.canNotBeEmpty'))
    }
  }
  return true
}

// 表单提交
const onSubmit = async formEl => {
  if (!formEl) return
  await formEl.validate(valid => {
    if (!valid) {
      return
    }
    const emptyTag = nonEmpty()
    if (!emptyTag) return

    const paramsData = {
      id: dataForm.value.id,
      paramKey: props.paramKey,
      paramValue: JSON.stringify(dataForm.value),
      remark: props.remark
    }
    http({
      url: http.adornUrl('/sys/webConfig/save'),
      method: dataForm.value.id ? 'put' : 'post',
      data: http.adornData(paramsData)
    }).then(() => {
      ElMessage({
        message: $t('remindPop.success'),
        type: 'success',
        duration: 1500,
        customClass: 'zZindex'
      })
      updateWebConfigData()
    })
  })
}
// 更新网站配置信息
const updateWebConfigData = () => {
  if (props.paramKey !== 'PLATFROM_WEBSITE_CONFIG') {
    return false
  }
  http({
    url: http.adornUrl('/sys/webConfig/getActivity'),
    method: 'get'
  }).then(({ data }) => {
    data = formatConfigInfo(data)
    webConfigStore.addData(data)
  })
}
</script>

<style lang="scss" scoped>
:deep(.el-input) {
  width: 60%;
}
:deep(.el-textarea) {
  width: 60%;
}
:deep(.el-form-item) {
  img {
    // 单独设置：网站配置图标按原比例缩放显示
    object-fit: scale-down !important;
  }
}
</style>
